@import './base.css';

#app {
  margin: 0 auto;
  font-weight: normal;
}


:root[theme="#67C23A"] {
  --backgroundColor: #67c23a;
  --hover-backgroundColor: #e1f3d8;
}
:root[theme="#E6A23C"] {
  --backgroundColor: #e6a23c;
  --hover-backgroundColor: #faecd8;
}
:root[theme="#F56C6C"] {
  --backgroundColor: #f56c6c;
  --hover-backgroundColor: #fde2e2;
}
:root[theme="#409EFF"] {
  --backgroundColor: #409eff;
  --hover-backgroundColor: #d9ecff;
}
:root[theme="#626aef"] {
  --backgroundColor: #626aef;
  --hover-backgroundColor: rgb(239, 240, 253);
}

/* a,
.green {
  text-decoration: none;
  color: hsla(160, 100%, 37%, 0.3);
  transition: 0.4s;
} */

@media (hover: hover) {
  a:hover {
    background-color: hsla(160, 100%, 37%, 0.2);
  }
}

@media (min-width: 1024px) {
  body {
    display: flex;
    place-items: center;
  }

  #app {
    /* display: grid; */
    grid-template-columns: 1fr 1fr;
    /* padding: 0 1rem; */
  }
}


